<template>
  <div class="footer">
    <div v-for="(icon, index) in icons" :key="icon.id">
      <a :href="icon.link" v-if="icon.link.indexOf('www.finewest.cn') > -1">
        <div class="order">
          <img :src="changeNum === index ? icon.imageSel : icon.image">
          <div class="shopping-cart" v-if="icon.goods > 0">
            <span>{{icon.goods}}</span>
          </div>
        </div>
        <span :class="{selected: changeNum === index}">{{icon.name}}</span>
      </a>
      <router-link :to="icon.link" v-else>
        <div class="order">
          <img :src="changeNum === index ? icon.imageSel : icon.image">
          <div class="shopping-cart" v-if="icon.goods > 0">
            <span>{{icon.goods}} </span>
          </div>
        </div>
        <span :class="{selected: changeNum === index}">{{icon.name}}</span>
      </router-link>
    </div>
  </div>
</template>
<script>
  import home from '../assets/picture/home.png'
  import home2 from '../assets/picture/home2.png'
  import aboutWe from '../assets/picture/about-we.png'
  import aboutWe2 from '../assets/picture/about-we2.png'
  import shopping from '../assets/picture/shopping-cart.png'
  import shopping2 from '../assets/picture/shopping-cart2.png'
  import our from '../assets/picture/our.png'
  import our2 from '../assets/picture/our2.png'

  export default {
    name: 'footer',
    data () {
      return {
        changeNum: 0,
        icons: [
          {name: '主页', image: home, imageSel: home2, link: '/', id: 1},
          {name: '了解我们', image: aboutWe, imageSel: aboutWe2, link: '/about-finewest', id: 2},
          {name: '购物车', image: shopping, imageSel: shopping2, link: 'http://www.finewest.cn/goods_cart1.htm', goods: 0, id: 3}, // http://www.finewest.cn/goods_cart1.htm
          {name: '我的', image: our, imageSel: our2, link: '/login', id: 4} // http://www.finewest.cn/buyer/index.htm
        ]
      }
    },
    mounted () {
      this.changeNum = this.$route.meta.footer
      if (this.$utils.getCookie('USER_NAME')) {
        this.icons[3].link = 'http://www.finewest.cn/buyer/index.htm'
      }
    }
    /* methods: {
      gbNum (index) {
        this.changeNum = index
      }
    } */
  }
</script>
<style scoped lang="scss">
  .footer{
    position: fixed;
    z-index: 949;
    bottom: 0;
    width: 100%;
    height: 53px;
    background: #ffffff;
    box-shadow: 0 0 10px 1px #f5f5f5;
    a{
      display: block;
      width: 25%;
      float: left;
      text-align: center;
      height: 100%;
      span{
        font-size: 11px;
        line-height: 11px;
      }
      .order{
        position: relative;
        display: table;
        margin: 0 auto;
        & > img{
          width: 29px;
          height: 29px;
          display: inherit;
          margin: 3px auto 2px;
        }
      }
       .selected{
        color: #e92d46;
      }
    }
  }
  .footer .shopping-cart{
    position: absolute;
    left: 20px;
    top: 2px;
    img{
      display: inherit;
    }
    span{
      color: #ffffff;
      font-size: 10px!important;
      display: block;
      width: 15px;
      text-align: center;
      height: 15px;
      line-height: 17px;
      background: url("../assets/picture/goods-number.png") no-repeat;
      background-size: 15px 15px;
    }
  }
</style>
